$control-captionbar: (color: getCssVar('color', 'text', 0),
  font-size: getCssVar('font-size', 'header-5'),
  sub-main-font-size: getCssVar('font-size', 'header-6'),
  font-weight: getCssVar('font-weight', 'bold'),
  line-height: rem(26px),
  text-align: center,
  min-height: getCssVar('spacing', 'super-loose'),
  sub-caption-font-size: getCssVar('font-size', 'regular'),
  sub-caption-color: getCssVar('color', 'text', 2),
  padding: getCssVar('spacing', 'tight') 0,
  icon-width: rem(20px),
);

@include b(control-captionbar) {
  @include set-component-css-var(control-captionbar, $control-captionbar);

  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  min-height: getCssVar('control-captionbar', 'min-height');
  padding: getCssVar('control-captionbar', 'padding');

  @include when(hasSub) {

    @include b(control-captionbar-caption) {
      font-size: getCssVar('control-captionbar', 'sub-main-font-size');
    }
  }


  @include e(icon) {
    display: inline;
    margin-right: getCssVar(spacing, tight);
  }

  @include b(control-captionbar-caption) {
    position: relative;
    display: flex;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: getCssVar('control-captionbar', 'font-size');
    font-weight: getCssVar('control-captionbar', 'font-weight');
    line-height: getCssVar('control-captionbar', 'line-height');
    color: getCssVar('control-captionbar', 'color');
    text-align: getCssVar('control-captionbar', 'text-align');

    >span {
      @include utils-ellipsis;
    }

    @include b(icon) {
      flex-shrink: 0;
      width: getCssVar('control-captionbar', 'icon-width');
      font-size: getCssVar('control-captionbar', 'icon-width');
    }
  }

  @include b(control-captionbar-sub-caption) {
    @include utils-ellipsis;

    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: getCssVar('control-captionbar', 'sub-caption-font-size');
    color: getCssVar('control-captionbar', 'sub-caption-color');
    text-align: getCssVar('control-captionbar', 'text-align');
  }
}